La propiedad box-shadow nos permite añadir sombra a una imagen, párrafo o bloque (DIV).
El problema es que esta propiedad no está disponible en todos los navegadores y debemos añadir la propiedad que cada navegador va incorporando.
Estos datos son proporcionados por Vagabundia y es cuestión de recordarlos.

Firefox 3.5 en adelante:
-moz-box-shadow: 5px 5px 5px #C0C0C0;

WebKit, Chrome y Safari:
-webkit-box-shadow: 5px 5px 5px #C0C0C0;

Internet Explorer 8
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";

Internet Explorer en general:
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);

Para versiones de Internet Explorer anteriores a la 8 es necesario añadir width o height.
Podemos añadir los estilos de la sombra directamente donde vamos a añadirla.
Esto sería el contenido del bloque
<div style="-moz-box-shadow: 0px 0px 8px #C0C0C0; border: 1px solid rgb(204, 204, 204); margin-bottom: 1.5em; padding: 1px;"><div style="padding: 0.5em; text-align: center;">Esto sería el contenido del bloque</div></div>

También podemos añadirlos a la hoja de estilos antes de ]]></b:skin>

.sombra-div {
height:30px;
padding: 10px;
width: 450px;
font-size: 18px;
margin: 10px auto;
text-align: center;
border: 1px solid #C0C0C0;
background-color:#F0C2D1;
-moz-box-shadow:4px 4px 3px #ccc;
-webkit-box-shadow: 4px 4px 3px #ccc;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);
}

Donde queremos mostrar el DIV añadimos:
<div class="sombra-div">
Esto sería el contenido del bloque
</div>

Si lo que añadimos es una imagen:

.sombra-image {
padding: 0.1em;
width: 200px;
height: 210px;
background-color:#FFF;
border: 1px solid #C0C0C0;
-moz-box-shadow:4px 4px 3px #ccc;
-webkit-box-shadow: 4px 4px 3px #ccc;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);
}

<div class="sombra-image"><img src="url-imagen" border="0" /></div>

O un texto cualquiera

Aquí cualquier texto


.sombra-tex {
text-shadow: 2px 3px 4px #000;
color: #F0C2D1;
font-size: 48px;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);
}

<p class="sombra-tex">Aquí cualquier texto </p>



Suerte Bilosony2™
Unknown

Piedra Preciosa son las cosas que me gustan para jugar, definitivamente lo que me relaja y envía a otros mundos es el blog, las redes sociales no han calado en este ser humano.
Declaración realizada para que pase el escribano de Jmiur a tomar nota :D

Besos y espero estes mejor del resfrío!

Responder
DH

Gema.
Cuando he visto que has publicado esta entrada me ha parecido que tienes la respuesta a la gran inquietud que me ha perseguido desde hace mucho tiempo.
Mi blog es una sola columna nacida de la plantilla mínima. Pero quisiera añadirle una sombra a la zona activa de las entradas y no se como hacerlo. Quisiera que se viera algo así como en esta plantilla de muestra: http://finaltemp164.blogspot.com/

Si puedes ayudarme sería maravilloso para darle algo de gracia a mi espacio.
Mi espacio es: http://dhesc.blogspot.com/

Gracias. Feliz día.

Responder
DH

Creo que lo he logrado gema!
Solo he añadido el código correspondiente a Chrome en el outer-wrapper; aunque no sea si sea lo correcto, pero en la vista previa me aparece una sombra del lado derecho.

Sigo viendo :)

Responder
Anónimo

Gem@ hace un par de dias que he detectado un problema en mi plantilla al que no doy solución.
Cuando voy a la pestaña de "diseño"...para cambiar un gadget de sitio,no me responde y no puedo cambiar nada.
Nunca me habia pasado antes.
Esto navegando con Mocilla Firefox en su última versión.Sin embargo con Internet Explorer si funciona todo.
Podrías indicarme que puedo hacer o a dónde dirigirme.
Gracias.Un saludo.

Responder
DH

Gema.
Disculpa la molestia jeje.
He logrado añadir la sombra en el outer-wrapper.
Pero tengo un inconveniente:
En el navegador Chrome he modificado las medidas y me ha quedado tal como quiero: la sombra sobresale hacia todos los lados.
En firefox he colocado las mismas medidas.
Pero en Explorer no se como modificar para que la sombra quede sobresaliente hacia todos los lados. Cuando cambio los números mueve el angulo de la sombra, pero la sombra no queda detrás de manera que sobresalga por los bordes.

Habrá alguna forma de lograr esto?

Gracias gema.
http://dhesc.blogspot.com/

Responder
Bilosony2™

Gracias Gem@ por responderme la pregunta y encima con una entrada jeje:D Ahora lo aplicare a mi blog gracias y suerte!!!!:)

Responder
Julie

Hola, Gema!
Excelente data!
Te hago una consulta, dónde habría que "tocar" para que aparezca la sombra en todas las imágenes de los posts por defecto??
Digo, para no tener que editar entrada por entrada para que todas tengan su sombra.

Se puede?? Espero ansiosa tu respuesta!

Responder
Gem@

:: Graciela es la misma sensación que yo experimento "te envía a otros mundos" nos separa de lo cotidiano de las cosas que tenemos en mente. ¿Te das cuenta ? es una terapia que compartimos muchos :)
(Estoy algo mejor, gracias)


:: Fero prueba con
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";

en direction=125,strength=5 si ves que no resulta consulta la entrada de J.Miur es mucho más completa y habla sobre la distancia horizontal y vertical de la sombra de todas formas coN Explorer nunca la verás igual :S

:: Hola Anna se está dando ese problema últimamente con frecuencia, al menos me lo están consultando bastante, la plantilla de diseño es algo que no podemos controlar pero si podemos mover los gadget desde la plantilla edición de HTML.
Mientras Blogger soluciona ese problema puedes solucionarlo de %% esta forma. Espero resulte bien.

:: Bilosony2™ no recordaba donde habías dejado tu comentario por eso no te enlacé (lo arreglo) espero sea útil ;)

:: JulieFernn los estilos para las imágenes de las entradas están en
.post img {
....
....
....
}

pero si se añaden ahí todas las imágenes de los post adquieren los mismos estilos, incluidas las que no son subidas al post y están en la plantilla, herramientas de edición rápida, iconos de redes sociales...
Para que sólo afecte a las imágenes que subimos a una entrada lo correcto sería añadir:

.post-body img {
....
....
....
}

Responder
Bilosony2™
Este comentario ha sido eliminado por el autor.
Responder
Bilosony2™

Gracias Gem@ ya e aplicado las sombras en algunas partes de mi blog PINTAGRAFF tube un poco de drama con explorer pero lo arregle y decidi que en la vercion de explorer no se vean las sombras jeje:$

Sueerte!!!:D

Responder
Deybi

A mi me fascinó una vez lo vi. Me encanta.

Responder
Ami~

¡Gem@! ¡Tú siempre escribes sobre lo que me gustaría instruirme! ¡Eres muy dulce!
Y lo mejor de todo, es que tus explicaciones son muy buenas... no sé qué haría sin ti :$
Me parece grandioso que IE acepte estas modalidades, para mí en nuevo, pensé que nunca lo haría... estoy muy retrasada :0
¿Sabes si IE tiene alguna modalidad para las box con bordes redondeados? :D

Responder
DH

Muchas gracias gema!
voy inmeditamente a hacer lo que me dices.
Que estés muy bien
saludos.

Responder
Anónimo

Gem@,gracias por tu respuesta.
Ante el problema que te he descrito de la pantalla de diseño y no poder mover los gadgets de sitio...he descubierto que el problema me ha surgido al actualizar Mozilla Firefox a su última versión 3.6. Posteriormente a la actualización me falla la pagina de diseño;he vuelto a la versión anterior y todo va bien,así como con Internet Explorer que tambien todo va bien.
Dime tu que puedo hacer si no puedo actualizar Mozilla Firefox.
Un saludo.

Responder
Gem@

:: Bilosony2™ no es una mala opción porque no altera nada simplemente se mostrará de la misma forma que antes de añadirla.

:: Hola Deybi eso mismo me ocurrió hace tiempo, desde entonces las sombras han estado presentes en mi blog de una forma u otra :)

:: Ami~ hasta donde yo sé con css no e sposible las esquinas redondeadas en Explorer, hay técnicas que nos ayudan a obtener ese resultado.
Puedes ver algo sobre ese tema %% aquí

:: Saludos Fero :)

:: Anna no sabría decirte, yo estoy usando la última versión de Firefox 3.6. y no se ha presentado ese problema ¿ocurre sólo en ese blog o en cualquier otro?

Responder
Santiago,r.a

Espectacularrrrrrrr!!! Felicidades por su trabajo en la página web. :O

Y lo mejor es que funciona el efecto del texto sombreado y el del cuadro con la imagen de la rosa en Mozilla e InternetExplorer.

Responder
Gem@

:: Me alegra que funcionara bien Santiago :D

Responder
amedidape

Hola.
Me parece interezante tu aporte, muy bueno, pero con respecto aque si funciona en IE, lo he porbado con la version 8, pues si, hace la sombra mas rapida que pude hacer en IE, :D ... -,- ... con el mero inconveniente de que -,- , distorciona algunos pixeles y hace del texto una horrible presentacion... :(

espero que esta fucion se mejore, seria genial, por ahora tendre que seguir con los div...

pd: O tal vez me haya equivocado el algo? a mi parecer creo que ya te diste cuenta pues estoy escribiendo en el IE8 y se ve igual... :S

Saludos y gracias!

Responder
Gem@

:: Se distorsiona KARLOZ, el efecto no es de la misma calidad, no se pierde pero si pierde calidad ;)

Responder
Susana

Hola Gem@, me fascina esto de las sombras, y lo mejor es que me sale :) jeje pero una consulta, he aplicado este efecto a las imagenes de mis entradas solamente, pero lo quisiera ahora es que las fotos de una entrada solamente no tuvieran sombras, ¿se puede eso?, es que tienen fondo blanco como mi main y da la sensación que estuvieran caladas y eso me gusta.

Gracias.

Responder
Gem@

:: En ese caso puedes añadir la imagen con una clase distinta por ejemplo añades en los estilos:
.sinborde img{
padding: 5px;
}

Y en la entrada:
<div class="sinborde"><img src="url-imagen"/></div>

Responder
Susana
Este comentario ha sido eliminado por el autor.
Responder
Susana

Hola, no me funciona Gem@ :'(, la sombra no desaparece ¿esta bien sobre "skin" no?, aunque tambien probe colocarlo debajo de ".post-body img {".

http://svblogdepruebas.blogspot.com/

gracias :)

Responder
Gem@

<img style="border: none;" src="http://2.bp.blogspot.com/_TfYpNSp_3xY/TBkfcGpmYII/AAAAAAAAACU/ZJdedA0LWyA/s1600/granate.jpg" alt="">

Responder
Gem@

:: Prueba ese código anterior Susana, no es necesario que añadas estilos en la plantilla simplemente directo a la entrada ;)

Responder
Susana

No funciona Gem@ :'( la sombra sigue. tambien probe en otra plantilla de blogger por si acaso y nada.

Gracias :)

Responder
Gem@

:: Pues yo he probado y me funciona perfectamente :S inténtalo como te digo en el comentario 21 y me avisas para ver donde está el error.

Responder
Susana

Hola Gem@! estuve probando los codigos y nada, copio y vuelvo a copiar y trato de saber donde fallo pero no encuentro nada. Si a ti te sale entonces debe ser error de blogger, ya viste que tampoco me salia lo de los bordes al principio.

Cuando probe con el segundo que me diste lo que se borro fue el borde que viene con el codigo de la sombra, y no la sombra.

http://svblogdepruebas.blogspot.com/
(aqui las imagenes estan sin borde, el borde que se ve es el que trae el codigo de sombras).

Gracias!.

Responder
Gem@

:: La sombra queda visible porque en los estilos para las imágenes que subes a la entrada está añadida la sombra.
Tendrías que añadir lo siguiente para eliminar también la sombra igual que hiciste con el borde:

<img style="border: none;-moz-box-shadow:none" src="http://2.bp.blogspot.com/_TfYpNSp_3xY/TBkfcGpmYII/AAAAAAAAACU/ZJdedA0LWyA/s1600/granate.jpg" alt="">

Responder
Susana

Ahora si me sale Gem@ :D :D :D
Muchas gracias por tu ayuda!!!!!! :D :D
Saludos

Responder
Gem@

:: Estupendo!! :)

Responder
Unknown

Hola Gema!!

Tengo una pequeña duda, he puesto el código dentro de .post-body img { para que la sombra esté en todas las imágenes de los posts y me gustaría saber si hay algún código para anular el efecto en ciertas imágenes como las que utilizo con aspecto de botón para descargar.

Gracias por adelantado

Responder
Gem@

:: Javierlota prueba a establecer border:0 en la misma imagen, ejemplo:

<img border="0" height="40" src="url-imagen" width="60" />

Responder
Unknown

No se quita, además ya le había quitado el borde al código, te lo dejo para que lo veas:

.post-body img {
padding: 0.1em;
background-color:none;
border: none;
-moz-box-shadow:4px 4px 3px #000;
-webkit-box-shadow: 4px 4px 3px #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=125,strength=5);
}


Muchas Gracias Gem@

Responder
Gem@

:: Javierlota escribo de nuevo porque no me entendía ni yo misma :S
Decía que en ese caso añadas unos estilos exclusivamente para las imágenes sin borde, es decir en la plantilla añades:

.sinborde {
background-color: transparent !important;
border: none !important;
padding: 0 !important;
}

Y en la imagen:
<img class="sinborde" src="url-imagen" />

De esa forma puedes añadir estilos tranquilamente a las imágenes de los post y con la clase sinborde para las que no desees borde.
Ahora está más claro verdad?

Responder
Unknown

Esta vez si te he entendido pero ponga las propiedades que ponga, la sombra aparece encima de todo, he intentado con la clase sinborde y nada, también he intentado ponerle un borde grande del color del fondo de la entrada para que tapara la sombra y nada, hasta he intentado añadir la clase de la sombra pero con el color de fondo, de sombra y todo igual que el del blog y aplicárselo solo a las imágenes en las que no quiero que haya borde (o al menos que no se vea) y nada.

No sé que hacer ¿Se te ocurre algo?

Gracias por tu esfuerzo

Responder
Gem@

:: Todo eso tendría que verlo online Javier, es decir los estilos de las imágenes con sombra y esa imagen que no quieres borde con la clase de sinborde.
¿No tienes algún blog de pruebas para instalar la misma plantilla y así lo vemos como te digo?

Responder
Unknown

Puedes verlo en este blog de pruebas

http://pruebas2-elartedelafotografia.blogspot.com

Como no es en el que he estado probando ya que ese está hecho un asquito en el del enlace de arriba solo le he intentado quitar el borde con la clase sin borde y como ves, la de la sombra la pisa.

Responder
Gem@

:: Bien, bien, bien ahora si que lo veo claro :)
Añade a los estilos sinborde la siguiente línea en negrita para eliminar la sombra:

.sinborde {
background-color: transparent !important;
border: none !important;
padding: 0 !important;
-moz-box-shadow: none !important;
}

Siento si te hice perder el tiempo pero hasta que no lo he visto no lo entendía :S

Responder
Unknown

Genial!!!

Funciona perfectamente, también he añadido...

-webkit-box-shadow: none !important;
-ms-filter: none !important;

... para que no se vea en unos sí y en otros no.

Tardaré un par de días en ponerlo porque voy a tener que añadir muchas clases sinborde je je je

Muchísimas gracias Gem@ :)

Responder
Gem@

:: Me alegra esté solucionado.
Una vez arregles esas imágenes sin borde del blog, puedes añadir el código de la imagen sin borde en la plantilla de entrada (está en configuración) de esa forma cada vez que editas una entrada ya tienes preparado el código.
Si lo usas te evita trabajo y si no, lo eliminas y listo :)

Responder
Unknown

Mira, pues no lo había pensado, gracias por la idea.

Ayer me di una paliza pero ya lo he puesto en todos los "DESCARGAR" y he aplicado la sombra

¡¡¡Queda genial!!!

Gracias por todo

Responder
Gem@

:: Esto es adictivo verdad Javier? pero inofensivo para la salud :)

Responder
Unknown

Ya te digo Gema, superadictivo, menos mal que como tu dices no es perjudicial. :)

Me ha dado por rediseñar el blog por partes y me están viniendo muy bien tus artículos

Saludos!!

Responder
Gem@

:: Es la mejor forma de aprender rompiendo cosas y la satisfacción es doble que cuando instalamos un diseño creado por otros.
Adelante!! todo para ti :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top